<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>聊天移动UI</title>
  </head>
  <body>
    <div class="container">
      <div class="page">
        <div class="main-panel">
          <nav>
            <div class="buttons">
              <i class="fas fa-chevron-left fa-lg"></i>
              <i class="fas fa-search fa-lg"></i>
            </div>
            <ul class="menu">
              <li class="active">
                消息列表
              </li>
              <li>我的好友</li>
              <li>我的群聊</li>
            </ul>
          </nav>

          <!-- 常用联系人面板 -->
          <section class="middle-panel">
            <div class="favorite">
              <div class="favorite-menu">
                <span>常用联系人</span>
                <i class="fas fa-ellipsis-h"></i>
              </div>
              <div class="people">
                <div class="profile">
                  <img
                    src="https://randomuser.me/api/portraits/men/32.jpg"
                    alt="头像"
                    class="profile-image"
                  />
                  <div class="profile-name">
                    张展鸣
                  </div>
                </div>
                <div class="profile">
                  <img
                    src="https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=3759e09a5b9fbe53088b23c615b6312e"
                    alt="头像"
                    class="profile-image"
                  />
                  <div class="profile-name">
                    李冷菱
                  </div>
                </div>
                <div class="profile">
                  <img
                    src="https://tinyfac.es/data/avatars/475605E3-69C5-4D2B-8727-61B7BB8C4699-500w.jpeg"
                    alt="头像"
                    class="profile-image"
                  />
                  <div class="profile-name">
                    赵智涵
                  </div>
                </div>
                <div class="profile">
                  <img
                    src="https://randomuser.me/api/portraits/women/44.jpg"
                    alt="头像"
                    class="profile-image"
                  />
                  <div class="profile-name">
                    王妙夢
                  </div>
                </div>
                <div class="profile">
                  <img
                    src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NjYzMzE1MV5BMl5BanBnXkFtZTgwNTA4NDY4OTE@._V1_UX172_CR0,0,172,256_AL_.jpg"
                    alt="头像"
                    class="profile-image"
                  />
                  <div class="profile-name">
                    张雪宁
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- 聊天面板 -->
          <section class="message-panel">
            <div class="mask"></div>
            <div class="messages">
              <div class="message">
                <img
                  src="https://randomuser.me/api/portraits/men/97.jpg"
                  alt=""
                />

                <div class="info">
                  <div class="name">
                    张智晨
                  </div>
                  <div class="content">
                    哈喽，今天打算干什么？
                  </div>
                </div>
                <div class="time">
                  2019/12/12
                </div>
              </div>

              <div class="message">
                <img
                  src="https://randomuser.me/api/portraits/men/86.jpg"
                  alt=""
                />

                <div class="info">
                  <div class="name">
                    李萌
                  </div>
                  <div class="content">
                    下午到我办公室来一趟
                  </div>
                </div>
                <div class="time">
                  昨天
                </div>
              </div>
              <div class="message">
                <img
                  src="https://randomuser.me/api/portraits/men/22.jpg"
                  alt=""
                />

                <div class="info">
                  <div class="name">
                    张显
                  </div>
                  <div class="content">
                    晚上到我家来玩呀
                  </div>
                </div>
                <div class="time">
                  昨天
                </div>
              </div>
              <div class="message">
                <img
                  src="https://pbs.twimg.com/profile_images/1054434556156162054/1H_7AxP0.jpg"
                  alt=""
                />

                <div class="info">
                  <div class="name">
                    王奇
                  </div>
                  <div class="content">
                    我跟你说，昨天发生了一件很奇妙的事
                  </div>
                </div>
                <div class="time">
                  8:30
                </div>
              </div>
              <div class="message">
                <img
                  src="https://images.unsplash.com/photo-1456327102063-fb5054efe647?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=f05c14dd4db49f08a789e6449604c490"
                  alt=""
                />

                <div class="info">
                  <div class="name">
                    李明
                  </div>
                  <div class="content">
                    定于后天下午聚餐
                  </div>
                </div>
                <div class="time">
                  8:45
                </div>
              </div>
              <div class="message">
                <img
                  src="https://images.unsplash.com/photo-1520810627419-35e362c5dc07?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
                  alt=""
                />

                <div class="info">
                  <div class="name">
                    王雨凡
                  </div>
                  <div class="content">
                    下午去洗车，然后去商场
                  </div>
                </div>
                <div class="time">
                  8:50
                </div>
              </div>
              <div class="message new">
                <img
                  src="https://randomuser.me/api/portraits/women/63.jpg"
                  alt=""
                />

                <div class="info">
                  <div class="name">
                    陈雪峰
                  </div>
                  <div class="content">
                    对，是这样的
                  </div>
                </div>
                <div class="time">
                  9:30
                  <div class="new-message-icon">
                    新消息
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </body>
</html>
